.container {
    /* Variables used in choice.module.css and choice-indicator.module.css.
       Placed here for convenience so that we don't have to maintain common values in multiple places.
    */
    --perseus-multiple-choice-spacing: var(--wb-sizing-size_160);
    --perseus-multiple-choice-indicator-font-size: var(
        --wb-font-heading-size-small
    );
    --perseus-multiple-choice-indicator-size: 3.2rem;
    /* 1.5 accounts for size of checkmark icon and its margin */
    --perseus-multiple-choice-indicator-correct-size: calc(
        calc(var(--perseus-multiple-choice-indicator-font-size) * 1.5) +
            var(--perseus-multiple-choice-indicator-size)
    );
    --perseus-multiple-choice-content-margin: calc(
        var(--perseus-multiple-choice-spacing) +
            var(--perseus-multiple-choice-indicator-size)
    );
    --perseus-multiple-choice-fade-direction: 90deg; /* Default is left to right */
    --perseus-multiple-choice-fade-color: var(
        --perseus-widget-background-color,
        var(--wb-semanticColor-core-background-base-default)
    ); /* Accounts for theme color, unless a background color is specified (i.e. from Graded Group Set) */

    box-sizing: border-box; /* Added here to ensure proper sizing in the editor preview */
    min-width: auto; /* Needed for scrollable view to work */
    padding-inline-end: var(--perseus-multiple-choice-spacing);
    /* The following transform will cause a new reference layer for its descendants,
           which we use to position the indicator and the scroll fade in a fixed place while scrolling.
     */
    transform: translateZ(0);
}

.choice-list {
    /* TODO(LEMS-3301): When old radio widget is deleted, remove this !important.
        This is required to override styles in perseus/src/styles/perseus-renderer-part-1.css that apply to ul elements.
    */
    padding: 0 !important;
    list-style: none !important;
    margin: 0 !important;
    min-width: fit-content;
    width: 100%;
    scrollbar-width: thin;
}

.choice-list:dir(rtl) {
    --perseus-multiple-choice-fade-direction: 270deg; /* Flip to right to left when in RTL mode */
}

/* FADE BARS FOR SCROLLING
   A white bar starts on the left side and stays solid until a small amount (spacing / 2) past the indicator (content margin).
   It then fades to transparent over that same small amount.
   It stays transparent until the opposite side of the container,
        where it fades back to white in the reverse order as just described.
   In review mode, the left side starts fading to transparent at a further distance to account for the checkmark icon.
   This is why --perseus-multiple-choice-content-margin is used on the left side,
        but the right side uses --perseus-multiple-choice-spacing.
   Also, in order to account for text direction, the direction is flipped when in RTL mode.
*/
.choice-list:before {
    background: linear-gradient(
        /* 90deg or 270deg */ var(--perseus-multiple-choice-fade-direction),
        var(--perseus-multiple-choice-fade-color)
            calc(
                var(--perseus-multiple-choice-content-margin) +
                    (var(--perseus-multiple-choice-spacing) / 2)
            ),
        transparent
            calc(
                var(--perseus-multiple-choice-content-margin) +
                    var(--perseus-multiple-choice-spacing)
            )
            calc(100% - (var(--perseus-multiple-choice-spacing) * 1.5)),
        var(--perseus-multiple-choice-fade-color)
            calc(100% - var(--perseus-multiple-choice-spacing))
    );
    content: "";
    display: block;
    height: 100%;
    position: fixed;
    width: 100%;
}

.content {
    display: flex;
    flex-direction: column;
    gap: var(--wb-sizing-size_120);
    margin-inline-start: var(--perseus-multiple-choice-content-margin);
    position: relative; /* Needed to enable the z-index to work */
    z-index: -1; /* Ensures that the content is below the indicator and scroll fade */
}

.instructions {
    display: block;
    color: var(--wb-semanticColor-core-foreground-instructive-strong);
    font-size: 1.8rem;
    line-height: 1.25;
    font-family: inherit;
    font-style: normal;
    font-weight: bold;
    margin-block-end: var(--wb-sizing-size_160);
}

.rationale {
    font-size: var(--wb-font-body-size-medium);
    font-weight: var(--wb-font-weight-medium);
    line-height: var(--wb-font-body-lineHeight-medium);
}

.rationale.is-correct {
    color: var(--wb-semanticColor-core-foreground-neutral-default);
}

.rationale :global(.perseus-renderer) {
    /* Ensures that multiple paragraphs are stacked with spacing */
    display: flex;
    flex-direction: column;
    gap: var(--wb-sizing-size_120);
}

.rationale :global(.perseus-renderer .paragraph) {
    /* Removes margin that is added by overly-broad styling for .paragraph - the gap in the rule above handles spacing */
    margin: 0;
}

.rationale :global(.perseus-renderer > .paragraph:not(:has(*))) {
    /* Ensures that empty paragraphs do not take up space */
    display: none;
}

.review-answers {
    --perseus-multiple-choice-content-margin: calc(
        var(--perseus-multiple-choice-spacing) +
            var(--perseus-multiple-choice-indicator-correct-size)
    );
}
